/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use './background-inline-svg.scss' as utils;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;

/* stylelint-disable selector-combinator-disallowed-list, @cloudscape-design/no-implicit-descendant */

.code-editor-refresh :global .ace_editor {
  .ace_gutter {
    border-start-start-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
  }
  .ace_scroller {
    border-start-end-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
  }
}

.code-editor :global .ace_editor {
  font-family: Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace;
  font-size: 14px;
  line-height: 20px;

  $gutter-padding-left: 24px;
  $gutter-padding-right: 16px;

  .ace_gutter-cell.ace_error,
  .ace_gutter-cell.ace_warning {
    cursor: pointer;

    background-repeat: no-repeat;
    background-size: $gutter-padding-right $gutter-padding-right;
    background-position: 4px 2px;
  }

  .ace_gutter-cell.ace_info {
    background-image: none;
  }

  .ace_gutter-cell.ace_error {
    color: awsui.$color-text-status-error;
    @include utils.background-inline-svg($path: './assets/negative.svg', $stroke: 'colorTextStatusError');
  }

  .ace_gutter-cell.ace_warning {
    @include utils.background-inline-svg($path: './assets/warning.svg', $stroke: 'colorTextStatusWarning');
  }

  .ace_gutter-cell {
    padding-inline: $gutter-padding-left $gutter-padding-right;
  }

  .ace_fold-widget {
    /* A good test case for disabled folds
       <<html<<<<
       </html>
    */
    inline-size: $gutter-padding-right - 2 * 1px; // gutter padding - 1px margin each side
    margin-inline-end: -$gutter-padding-right + 1px; // leave 1px margin on each side
    background-color: transparent;
    border-block: none;
    border-inline: none;
  }

  .ace_gutter_annotation {
    // To align our custom icon with the annotation clickable/focus area.
    // Based on -19px in ace's default stylesheet.
    margin-inline-start: -21px;
  }

  .ace_fold-widget,
  .ace_gutter_annotation {
    box-shadow: none;
    @include focus-visible.when-visible {
      @include styles.focus-highlight(-1px);
    }
  }

  $active-line-border-color-light: awsui.$color-border-code-editor-ace-active-line-light-theme;
  $active-line-border-color-dark: awsui.$color-border-code-editor-ace-active-line-dark-theme;

  .ace_marker-layer > .ace_active-line {
    background: transparent;
    box-sizing: border-box;
    border-block-start: 1px solid $active-line-border-color-light;
    border-block-end: 1px solid $active-line-border-color-light;
  }

  &.ace_dark .ace_marker-layer > .ace_active-line {
    border-block-start: 1px solid $active-line-border-color-dark;
    border-block-end: 1px solid $active-line-border-color-dark;
  }

  .ace_gutter {
    background-color: awsui.$color-background-code-editor-gutter-default;
    color: awsui.$color-text-code-editor-gutter-default;
  }

  .ace_gutter,
  .ace_scroller {
    &:focus {
      // Inset focus visible styling that works with ace regions.
      box-shadow: inset 0 0 0 2px awsui.$color-border-item-focused;
    }
  }

  .ace_fold-widget.ace_open {
    @include utils.background-inline-svg(
      $path: './assets/caret-down.svg',
      $stroke: 'colorTextInteractiveDefault',
      $fill: 'colorTextInteractiveDefault'
    );

    &:hover {
      @include utils.background-inline-svg(
        $path: './assets/caret-down.svg',
        $stroke: 'colorTextInteractiveHover',
        $fill: 'colorTextInteractiveHover'
      );
    }
  }

  .ace_fold-widget.ace_closed {
    @include utils.background-inline-svg(
      $path: './assets/caret-right.svg',
      $stroke: 'colorTextInteractiveDefault',
      $fill: 'colorTextInteractiveDefault'
    );

    &:hover {
      @include utils.background-inline-svg(
        $path: './assets/caret-right.svg',
        $stroke: 'colorTextInteractiveHover',
        $fill: 'colorTextInteractiveHover'
      );
    }
  }

  .ace_gutter-active-line {
    background-color: awsui.$color-background-code-editor-gutter-active-line-default;
    color: awsui.$color-text-code-editor-gutter-active-line;

    .ace_fold-widget,
    .ace_gutter_annotation {
      @include focus-visible.when-visible {
        @include styles.focus-highlight(
          -2px,
          awsui.$border-radius-control-default-focus-ring,
          0 0 0 2px awsui.$color-text-code-editor-gutter-active-line
        );
      }
    }

    & > .ace_fold-widget.ace_open {
      @include utils.background-inline-svg(
        $path: './assets/caret-down.svg',
        $stroke: 'colorStrokeCodeEditorGutterActiveLineDefault',
        $fill: 'colorStrokeCodeEditorGutterActiveLineDefault'
      );

      &:hover {
        @include utils.background-inline-svg(
          $path: './assets/caret-down.svg',
          $stroke: 'colorStrokeCodeEditorGutterActiveLineHover',
          $fill: 'colorStrokeCodeEditorGutterActiveLineHover'
        );
      }
    }

    & > .ace_fold-widget.ace_closed {
      @include utils.background-inline-svg(
        $path: './assets/caret-right.svg',
        $stroke: 'colorStrokeCodeEditorGutterActiveLineDefault',
        $fill: 'colorStrokeCodeEditorGutterActiveLineDefault'
      );

      &:hover {
        @include utils.background-inline-svg(
          $path: './assets/caret-right.svg',
          $stroke: 'colorStrokeCodeEditorGutterActiveLineHover',
          $fill: 'colorStrokeCodeEditorGutterActiveLineHover'
        );
      }
    }

    &.ace_error {
      color: awsui.$color-text-code-editor-gutter-active-line;
      background-color: awsui.$color-background-code-editor-gutter-active-line-error;
      @include utils.background-inline-svg(
        $path: './assets/negative.svg',
        $stroke: 'colorTextCodeEditorGutterActiveLine'
      );
    }

    &.ace_warning {
      @include utils.background-inline-svg(
        $path: './assets/warning.svg',
        $stroke: 'colorTextCodeEditorGutterActiveLine'
      );
    }

    &.ace_error,
    &.ace_warning {
      & > .ace_fold-widget.ace_open {
        @include utils.background-inline-svg(
          $path: './assets/caret-down.svg',
          $stroke: 'colorStrokeCodeEditorGutterActiveLineDefault',
          $fill: 'colorStrokeCodeEditorGutterActiveLineDefault'
        );

        &:hover {
          @include utils.background-inline-svg(
            $path: './assets/caret-down.svg',
            $stroke: 'colorStrokeCodeEditorGutterActiveLineHover',
            $fill: 'colorStrokeCodeEditorGutterActiveLineHover'
          );
        }
      }

      & > .ace_fold-widget.ace_closed {
        @include utils.background-inline-svg(
          $path: './assets/caret-right.svg',
          $stroke: 'colorStrokeCodeEditorGutterActiveLineDefault',
          $fill: 'colorStrokeCodeEditorGutterActiveLineDefault'
        );

        &:hover {
          @include utils.background-inline-svg(
            $path: './assets/caret-right.svg',
            $stroke: 'colorStrokeCodeEditorGutterActiveLineHover',
            $fill: 'colorStrokeCodeEditorGutterActiveLineHover'
          );
        }
      }
    }
  }
}

/* stylelint-enable selector-combinator-disallowed-list, @cloudscape-design/no-implicit-descendant */
